<template>
	<div class="add"><el-button type="primary" @click="add">添加</el-button></div>
	 <el-dialog
		    v-model="dialogVisible_add"
		    title="Tips"
		    width="500"
		  >
		    <el-input type="text" v-model="name" placeholder="请输入添加的用户名"></el-input>
		    <el-input type="password" v-model="password" placeholder="请输入添加的密码"></el-input>
			<el-select
			      v-model="roleValue"
			      placeholder="请选择角色"
			      size="large"
			      style="width: 240px"
			    >
			      <el-option
			        v-for="item in options"
			        :key="item.id"
			        :label="item.name"
			        :value="item.id"
			      />
			    </el-select>
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="dialogVisible_add = false">Cancel</el-button>
		        <el-button type="primary" @click="addSubmit">
		          Confirm
		        </el-button>
		      </div>
		    </template>
	</el-dialog>
 <el-dialog
	    v-model="dialogVisible_update"
	    title="Tips"
	    width="500"
	  >
	    <el-input type="text" v-model="updateName" placeholder="请输入想修改的用户名"></el-input>
		<el-select
		      v-model="roleValue"
		      placeholder="请选择角色"
		      size="large"
		      style="width: 240px"
		    >
		      <el-option
		        v-for="item in options"
		        :key="item.id"
		        :label="item.name"
		        :value="item.id"
		      />
		    </el-select>
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogVisible_update = false">Cancel</el-button>
	        <el-button type="primary" @click="updateSubmit">
	          Confirm
	        </el-button>
	      </div>
	    </template>
	  </el-dialog>
	  <el-dialog
	    v-model="dialogVisible_del"
	    title="Tips"
	    width="500"
	  >
	    确认要删除 {{delName}} 吗？
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogVisible_del = false">Cancel</el-button>
	        <el-button type="primary" @click="delSubmit">
	          Confirm
	        </el-button>
	      </div>
	    </template>
	  </el-dialog>
	  <el-table :data="tableData" style="width: 1200px;">
	    <el-table-column prop="name" label="用户名" width="180" />
	    <el-table-column prop="password" label="密码" />
	    <el-table-column prop="createTime" label="创建时间" />
	    <el-table-column prop="updateTime" label="更新时间" />
		<el-table-column>
			<template #header>操作</template>
			<template #default="scope">
			  <el-button type="warning" @click="update(scope.row.id,scope.row.name)">编辑</el-button>
			  <el-button type="danger" @click="del(scope.row.id,scope.row.name)">删除</el-button>
			</template>
		</el-table-column>
	  </el-table>
</template>

<script setup>
	import {ref} from 'vue'
	const tableData = ref([])
	import {http} from "../components/http.js"
	function query(){
		http({url:"/queryUser",method:"get"}).then(res=>{
			tableData.value = res.data.data
		})
	}
	query()
	const dialogVisible_add = ref(false)
	const name = ref("")
	const password = ref("")
	const options = ref([])
	const roleValue = ref('')
	function add(){
			// queryRole()
			roleValue.value = undefined
			dialogVisible_add.value = true
			http({url:"/queryRole",method:'get'}).then(res=>{
				options.value = res.data.data
			})
		}
	function addSubmit(){
		http({url:'/addUser',method:'post',data:{name:name.value,password:password.value,role:roleValue.value}}).then(res=>{
			dialogVisible_add.value = false
			query()
		})
	}
	const dialogVisible_del = ref(false)
	const delName = ref("")
	const delId = ref(undefined)
	function del(id,name){
			delId.value = id
			delName.value = name
			dialogVisible_del.value = true
		}
	function delSubmit(){
		http({url:"/delUser?id="+delId.value,method:"get"}).then(res=>{
				dialogVisible_del.value = false
				query()
		})
	}
	const dialogVisible_update = ref(false)
	const updateId = ref(undefined)
	const updateName = ref("")
	function update(id,name){
			updateId.value = id
			updateName.value = name
			dialogVisible_update.value = true
			http({url:"/queryRole",method:'get'}).then(res=>{
				options.value = res.data.data
			})
			http({url:'/findRoleByUserId?id='+updateId.value,method:"get"}).then(res=>{
					roleValue.value = res.data.data[0].roleId
			})
			// queryRole()
			// http.get("/user/findByUserId?id="+updateId.value).then(res=>{
			// 	roleValue.value = res.data.data.roleId
			// })
		}
	function updateSubmit(){
		
		http({url:"/user/update",data:{id:updateId.value,name:updateName.value,role:roleValue.value},method:"post"}).then(res=>{
			dialogVisible_update.value = false
			query()
		})
	}
</script>

<style>
</style>